<template>
  <CustomNavbar></CustomNavbar>
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    class="scroll-content"
    scroll-y
    @scrolltolower="onScrolltolower"
  >
    <myButton @click="onButtonClick" :data="'abc'">点击我</myButton>
    <!-- <Guess :list="deptlist"></Guess>  -->
    <!-- <Guess ref="guessRef" :list="deptlist"></Guess> -->
    <view @tap="openPopup('address')">左边</view>
    <!-- <button class="button" type="primary" @click="openPopup('service')"><text class="button-text">顶部</text></button> -->
    <navigator url="/pages/login/login" hover-class="navigator-hover">
      <!-- <button class="button" type="primary" ><text class="button-text">登录</text></button> -->
    </navigator>
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <text class="text">{{ popupName }}</text>
      </view>
    </uni-popup>

    <uni-section title="纵向排列" type="line" padding>
      <uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
    </uni-section>

    <view style="width: 100%; height: 100rpx; background-color: #90d7ec"></view>

    <view style="width: 100%; height: 100rpx; background-color: #c3e0e7"></view>
    <view style="width: 100%; height: 100rpx; background-color: #e0ffff"></view>

    <view style="width: 100%; height: 100rpx; background-color: #d3d3d3"></view>
    <view style="width: 100%; height: 100rpx; background-color: #a9a9a9"></view>
    <!-- 
    <view style="width: 100%;height: 100rpx;background-color: #87C4ED;"></view>

    <view style="width: 100%;height: 100rpx;background-color: #00008B;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #0000FF;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFFF00;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFFACD;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #E6E6FA;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #A52A2A;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #8B4513;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFC0CB;"></view>




    <view style="width: 100%;height: 100rpx;background-color: #FF00FF;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #00FFFF;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFFF00;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #70DB93;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #5C3317;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #9F5F9F;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #B5A642;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #D9D919;"></view>


    <view style="width: 100%;height: 100rpx;background-color: #DC143C;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFF0F5;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FF69B4;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FF00FF;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #800080;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #BA55D3;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #9400D3;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #4B0082;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #8A2BE2;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #191970;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #000080;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #4169E1;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #6495ED;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #87CEEB;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #00BFFF;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #B0E0E6;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #5F9EA0;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #F0FFFF;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #E0FFFF;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #00FFFF;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #228B22;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #008000;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #006400;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #7FFF00;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #ADFF2F;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #9ACD32;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #F5F5DC;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFFFF0;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFFACD;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFFAF0;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #F5DEB3;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFE4B5;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FFA500;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #FF4500;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #87CEFA;"></view>
    <view style="width: 100%;height: 100rpx;background-color: #7CFC00;"></view> -->
  </scroll-view>
</template>

<script lang="ts" setup>
import Guess from '@/components/Guess.vue'
import PLATFORM from '@/utils/platform'
import { getDeptListPageApi, getDeptListApi, Dept } from '@/service/dept'
import CustomNavbar from './components/CustomNavbar.vue'
import { GuessInstance } from '@/types/components'
import { TestItem } from '@/types/global'

const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()

const popupName = ref<'service' | 'address'>()
const openPopup = (name: typeof popupName.value) => {
  popupName.value = name
  popup.value.open('bottom')
}

// const toggle =(type:string)=> {
//   // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
// popup.value.open(type)
// }

const active = 1
const list2 = [
  {
    title: '买家下单',
    desc: '2018-11-11',
  },
  {
    title: '卖家发货',
    desc: '2018-11-12',
  },
  {
    title: '买家签收',
    desc: '2018-11-13',
  },
  {
    title: '交易完成',
    desc: '2018-11-14',
  },
]

const guessRef = ref<GuessInstance>()
// 触发下拉刷新
const onRefresherrefresh = async () => {
  console.log('下拉刷新')
  isTriggered.value = true
  // 加载数据 api 要加 await
  // ...
  guessRef.value?.resetData()
  await Promise.all([
    getDeptList(),
    // getDeptPageList({ page: 1, size: 10 }),
    guessRef.value?.getMore(),
  ])
  isTriggered.value = false
}
const isTriggered = ref(false)

const onScrolltolower = () => {
  guessRef.value?.getMore()
}

defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const author = ref('菲鸽')
const description = ref(
  'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
)
// 测试 uni API 自动引入
onLoad(() => {
  console.log(author)
  // getDeptList()
})

const deptlist = ref<Dept[]>([])
const getDeptList = async () => {
  const res = await getDeptListApi()
  console.log('res.data', res.data)
  deptlist.value = res.data
}

// const getDeptPageList = async (reqDto: PageParams) => {
//   const res = await getDeptListPageApi({ page: 1, size: 10 })
//   console.log('res.data.records', res.data.records)
//   deptlist.value = res.data.records
// }

const onButtonClick = () => {
  console.log('点击')
}
</script>

<style>
.main-title-color {
  color: #d14328;
}

.scroll-content {
  width: 100%;
  height: calc(100vh - var(--window-top));
}

.status-btn {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 92rpx;
  margin: 30rpx;
  background-color: #007aff;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  flex-direction: row;
  /* #endif */
  padding: 15px;
}

.popup-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 15px;
  background-color: #fff;
}
.text {
  font-size: 12px;
  color: #333;
}
</style>
